<template>
  <div ref="main" class="main">
    <div class="title">
      <div class="title-left" @click="fullScreen">
        <svg-icon icon-class="fullScreen" />
      </div>
      <div class="title-center">不凡数据大屏</div>
      <div class="title-right">{{ nowTime }}</div>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="shellData">
          <p class="titleFont">电商数据<span>Shell Data</span></p>
          <div class="titleFont1">
            <p>销售量</p>
            <p>万元</p>
          </div>
          <countTo
            style="font-size: 60px; color: white"
            :start-val="66483950"
            :end-val="123664395"
            :duration="2000"
          />

          <p class="titleFont2">完成百分比</p>
          <div class="percentage">
            <el-progress :percentage="85" />
          </div>
          <p class="titleFont">热门搜索词<span>Top Search</span></p>
          <div class="keywords">
            <KeyWords />
          </div>
        </div>
        <div class="topSearch" />
      </div>
      <div class="content-center">
        <div class="his">
          <div class="histogram">
            <Histogram />
          </div>
        </div>
        <div class="center-bottom">
          <div class="map">
            <Map />
          </div>
          <div class="pieChart">
            <PieChart />
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="statisticsData">
          <p class="titleFont">统计数据<span>Statistics Data</span></p>
          <div class="allbox">
            <div v-for="item in boxList" :key="item" class="box">
              <div class="boximg">
                <svg-icon :icon-class="item.img" />
              </div>
              <div>
                <p class="titleFont1">{{ item.money }}</p>
                <p class="titleFont2">{{ item.note }}</p>
              </div>
            </div>
          </div>
          <p class="titleFont">大额订单<span>Supper Orders</span></p>
          <el-table
            class="titleFont2 exporttable"
            :data="form"
            :cell-style="{ background: '#100c2a', color: '#9aa8d4',borderColor:'#33416b' }"
            :header-cell-style="{ background: '#100c2a', color: '#9aa8d4',borderColor:'#33416b'}"
            stripe
          >
            <el-table-column prop="time" label="时间" />
            <el-table-column prop="name" label="物品" />
            <el-table-column prop="num" label="数量" />
            <el-table-column prop="price" label="金额" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="bg-animate">
      <BgAnimate />
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import Histogram from './components/histogram.vue'
import KeyWords from './components/keyWords.vue'
import Map from './components/map.vue'
import PieChart from './components/pieChart.vue'
import screenfull from 'screenfull'
import BgAnimate from '@/components/Vue_Background_Animation-master/BgAnimate.vue'
export default {
  name: 'Dashboard',
  components: {
    BgAnimate,
    PieChart,
    Map,
    KeyWords,
    countTo,
    Histogram
  },
  data() {
    return {
      nowTime: '',
      boxList: [
        {
          img: 'box1',
          money: '85.6',
          note: '订单总数 (万)'
        },
        {
          img: 'box2',
          money: '32.5',
          note: '销售总量 (万元)'
        },
        {
          img: 'box3',
          money: '92.6',
          note: '人均消费'
        },
        {
          img: 'box4',
          money: '45',
          note: '近十分钟新增订单数量'
        }
      ],
      form: []
    }
  },

  created() {
    for (var i = 1; i < 10; i++) {
      var obj = {}
      obj.time = '12-22'
      obj.name = '物品' + i
      obj.num = parseInt(Math.random() * 100)
      obj.price = parseInt(Math.random() * 100000)
      this.form.push(obj)
    }
    console.log(this.form)
    setInterval(() => {
      var date = new Date()
      this.nowTime = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    }, 1000)
  },

  methods: {
    fullScreen() {
      if (screenfull.isEnabled) {
        // 控制是否全屏的按钮
        screenfull.toggle(this.$refs.main)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  background-color: #100c2a;
  min-height: 100vh;
}
.title {
  width: 100%;
  height: 100px;
  color: rgb(255, 255, 255);
  position: relative;
  .title-center {
    height: 122px;
    background: url(../../icons/titleBG.png) 50% center / 100% 100%;
    font-family: "Microsoft Yahei", Arial, sans-serif;
    font-size: 36px;
    margin: 0 20%;
    text-shadow: rgb(255, 255, 255) 0px 0px 15px;
    font-weight: 700;
    text-align: center;
    line-height: 100px;
  }
  .title-right {
    font-size: 20px;
    font-weight: 400;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .title-left {
    font-size: 25px;
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  .content-left {
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
    .titleFont {
      font-size: 22px;
      color: #9aa8d4;
      span {
        font-size: 20px;
        color: #404d69;
      }
    }
    .titleFont1 {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      color: #9aa8d4;
    }
    .titleFont2 {
      font-size: 16px;
      color: #9aa8d4;

    }
    .exporttable{
      border:1px solid #33416b;
    }
    .percentage {
      padding: 20px;
    }
    .keywords {
      width: 100%;
      height: 400px;
    }
    ::v-deep .el-progress-bar__inner {
      background: linear-gradient(to right, pink, blue);
    }
  }
  .content-center {
    width: 50%;

    .his{
      padding: 0 30px;
      .histogram {
        width: 100%;
        height: 360px;

      }
    }
    .center-bottom {
      display: flex;
      .map {
        width: 100%;
        height: 400px;
      }
      .pieChart {
        width: 100%;
        height: 400px;
      }
    }
  }
  .content-right {
    width: 25%;
    padding: 0 10px;
    .titleFont {
      font-size: 22px;
      color: #9aa8d4;
      span {
        font-size: 20px;
        color: #404d69;
      }
    }
    .titleFont1 {
      margin: 0;
      font-size: 32px;
      font-weight: 700;
      color: #fff;
    }
    .titleFont2{
      margin: 0;
      font-size: 12px;
      color: #b0c2f9;
    }

    .allbox {
      width: 100%;
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto auto;
      .box {
        height: 100px;

        display: flex;
        align-items: center;
        .boximg {
          width: 40px;
          height: 40px;
          background-color: #0f2349;
          border-radius: 50%;
          border-radius: 50%;
          line-height: 40px;
          text-align: center;
          margin-right: 20px;
        }
      }
    }
  }
}
.bg-animate{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
  }
</style>
